<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="../project/static/css/normalize.css">
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>

<body>
    <header class="app">
        <ul>
            <li id="close">
                <img src="https://m.360buyimg.com/mobilecms/jfs/t19480/10/1439571805/820/787bec2c/5ac9d730N04e6d766.png"
                    alt="">
            </li>
            <li>
                <img src="https://img11.360buyimg.com/jdphoto/s80x80_jfs/t27847/91/107794072/6854/14716732/5b850ecaN644d2983.png"
                    alt="">
            </li>
            <li>打开京东app,购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <div class="search_wrap">
        <div class="lf"></div>
        <div class="search">
            <div class="jd"></div>
            <div class="search_icon"></div>
            <!-- search -->
            <div class="search_input">
                <input type="text" value="" id="input" placeholder="123">
            </div>
        </div>
        <div class="rg" id="search">搜索</div>
    </div>
    <!-- 主体部分 -->
    <div class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/155887/8/16711/104572/60534627Eb979dc75/cc416de39d2e83b0.jpg!cr_1125x445_0_171!q70.jpg.dpg"
                alt="">
        </div>
        <!-- nav -->
        <div class="nav">
            <a class="supermarket"><img
                    src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png.webp"
                    alt="">
                <span>京东超市</span></a>
            <a href="#"><img
                    src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png.webp"
                    alt="">
                <span>数码电器</span></a>
            <a href="#"><img
                    src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png.webp"
                    alt="">
                <span>京东服饰</span></a>
            <a href="#"><img
                    src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png.webp"
                    alt="">
                    <span>京东生鲜</span></a>
            <a href="#"><img
                    src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png.webp"
                    alt="">
                    <span>京东到家</span></a>
            <a href="#"><img
                    src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png.webp"
                    alt="">
                <span>充值缴费</span></a>
            <a href="#"><img
                    src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/150351/19/14167/6853/5fed882dE195ef673/b2aa7d67e675baf8.png.webp"
                    alt="">
                <span>9.9元拼</span></a>
            <a href="#"><img
                    src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png.webp"
                    alt="">
                <span>领劵</span></a>
            <a href="#"><img
                    src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/131663/33/3380/3674/5efbf50fEf79cf314/af4b57d2383e605d.png.webp"
                    alt="">
                <span>领金贴</span></a>
            <a href="#"><img
                    src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png.webp"
                    alt="">
                <span>plus会员</span></a>
            <div class="clear"></div>

        </div>
    </div>
    <script>
        $('#close').click(function (){
            $('.app').toggle()
            setTimeout(()=>{
                $('.app').toggle()
            },2000)
       })
       $(".supermarket").click(function(){
        $(".supermarket").html('<img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png.webp"><span>京东到家</span>')
       })

       $("#input").click(function(){
           $("#input").val('请输入内容')
       })

       $("#search").click(function(){
            var name=$("#input").val()
            // true 1 123 Hello  a ' , . 
            // false ''  0 undefined null
            console.log(!false==true)
            console.log(!true==false)
            if(name){
                alert('搜索成功')
            }else{
                alert('请输入内容')
            }
       })
    </script>
</body>

</html>